HTML Elements

HTML Element#

<p> This is a paragraph </p>

The <p> is called an "opening tag". All opening tags are wrapped in < >

The letter within the angle brackets is the "element name." p is the "paragraph" element.

At the end we have the </p> called a "closing tag". All closing tags are also wrapped in < > but the opening bracket < is followed by a / forward slash. Everything between the opening and closing tag is the "content."

Empty Element#

Some elements are called "empty elements." An example is the <img> element.

<img src="[https://unsplash.com/photos/8Ioyw5ZhWDo](https://unsplash.com/photos/8Ioyw5ZhWDo)" width="100">

This begins with the opening tag of <img but does not have a closing tag or content. This particular tag, as you can probably guess, is to embed an image onto the page.

Nesting#

HTML Elements can be nested within each other. As an example:

<div class="todo">
    <h4>To Do:</h4>

    <ul>
        <li>Clean</li>
        <li>Eat</li>
        <li>Nap</li>
    </ul>
</div>

Here we have a <div> with an <h4> and a <ul> nested within it. Within the <ul> we have <li> nested. When you are just beginning, it can be helpful to sketch what you are aiming to do and write your elements in to understand the structure.

Attributes#

Attributes contain extra information about the element that won't appear in the content displayed.

If we look back at the <img> tag above, we can break it down a bit:

<img src="[https://unsplash.com/photos/8Ioyw5ZhWDo](https://unsplash.com/photos/8Ioyw5ZhWDo)" width="100">

The src="" is an attribute that shows where the image is coming from. This can be from the files uploaded, or from a url. It also has a width="" attribute, giving it a width of 100px.

There are a couple rules to consider and adhere to with attributes:

They should have spaces between the element name and the attribute, as well as between each attribute.
They are added in the opening tag
Elements can have more than one attribute
Attributes are generally listed in the name="value" syntax.

Boolean Attributes#

Some attributes can be written without values. These are the "boolean" (true/false) values.

Example:

<button disabled> Button </button>

This has the attribute disabled without a value. When this attribute exists, it defaults to "true" and so the button is disabled.

Most Common HTML Elements#

These are the most common HTML Elements you will use and see on a regular basis, but there are many more as well:

Function	Tags
Define a section	`<head>, <header>, <footer>, <nav>, <main>, <body>, <section>`
Define a text content	`<h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>`
Define an image or link	`<img>, <a>`
Others	`<br>, <hr>`

Block Level vs Inline Elements#

Block Level elements always start on a new line and takes up the full width available

Example:

<div> is a block level element

Inline elements do not start on a new line and they only take up as much width as necessary

Example:

<span> is an inline element

Commenting in HTML#

Commenting in HTML allows you to include notes that are not displayed to the end-user.